<template>
  <base-data :loading="loading" :model="model" @reload="getData">
    <template v-slot:header-left>
      <el-button v-if="model._id" type="primary" size="small" @click="recycleBtnClick">记录</el-button>
      <slot name="header-left"></slot>
    </template>
    <template v-slot:header-center>
      <slot name="header-center"></slot>
    </template>
    <template v-slot:header-righr>
      <slot name="header-righr"></slot>
      <el-popover
        placement="top-start"
        title="数据信息"
        width="250"
        trigger="hover">
        <text-line :label-width="90" :data-arr="infoArr"></text-line>
        <i class="el-icon-info info-icon" slot="reference"></i>
      </el-popover>
      <el-button type="primary" size="small" @click="saveBtnClick" :loading="saveLoading">保存</el-button>
    </template>
    <template>
      <slot></slot>
    </template>
  </base-data>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import BaseData from '../base/index.vue'
  import DataModel from '@/models/DataModel'
  import YBPopView from "@/utils/popView";
  import TextLine from '@/components/global/textLine/index.vue'

  @Component({
    components: {
      BaseData,
      TextLine
    }
  })
  export default class DataBase extends Vue {

    @Prop({ type: Function, required: true }) getDataFun!: Function

    loading = false
    saveLoading = false
    model = new DataModel()

    get infoArr() {
      return [
        {
          title: '创建时间',
          text: this.model.createTimeStr
        },
        {
          title: '创建人',
          text: this.model.createUser?.name || ''
        }
      ]
    }

    // 保存按钮点击
    saveBtnClick() {
      this.saveLoading = true
      const resData = this.getDataFun()
      if (resData instanceof Promise) {
        resData.then((data: unknown) => {
          this.saveData(data)
        }).catch(() => {
          this.saveLoading = false
        })
      } else {
        this.saveData(resData)
      }
    }

    // 记录按钮点击
    recycleBtnClick() {
      const { _id } = this.model
      const path = `/project/record/${_id}`
      this.$router.push(path)
    }

    /**
     * 保存数据
     */
    saveData(resData: unknown) {
      this.model.setData(resData)
      this.model.updateOneData().then((newDate) => {
        YBPopView.msgSuccess('保存成功')
        this.model.createTime = newDate
      }).finally(() => {
        this.saveLoading = false
      })
    }

    /**
     * 获取当前数据
     */
    getData() {
      this.loading = true
      this.model.getOneData().then(() => {
        this.loading = false
        this.$emit('data', this.model.data)
      }).finally(() => {
        this.loading = false
      })
    }

    mounted() {
      const { id } = this.$route.params
      this.model.superId = id
      this.getData()
    }
  }

</script>

<style scoped>
  .info-icon {
    font-size: 30px;
    width: 30px;
    margin-right: 20px;
    color: cornflowerblue;
    cursor: pointer;
  }
</style>
